<template>
  <view class="message-item">
    <view class="message-item-inner">
      <u-avatar class="message-item__avatar" :size="32" :src="item.avatar" />
      <view class="message-item__file">

        <!-- <u-link :text="`[ ${item.m_data.name} ]`" @click="handleDownload"></u-link> -->
        <div class="flex-center resumeItem " @click="toPage">
          <image class="resumeIcon" v-if="item.m_data.url.split('.')[item.m_data.url.split('.').length - 1] === 'docx'"
            src="https://xingangtong.oss-cn-beijing.aliyuncs.com/common/docx%402x.png" mode="asspectFill" />
          <image class="resumeIcon" v-if="item.m_data.url.split('.')[item.m_data.url.split('.').length - 1] === 'doc'"
            src="https://xingangtong.oss-cn-beijing.aliyuncs.com/common/doc%402x.png" mode="asspectFill" />
          <image class="resumeIcon" v-if="item.m_data.url.split('.')[item.m_data.url.split('.').length - 1] === 'pdf'"
            src="https://xingangtong.oss-cn-beijing.aliyuncs.com/common/Pdf%402x.png" mode="asspectFill" />
          <div class="ml-36" style="width: calc(100% - 150upx);">
            <div class="fontE1 color-3 fontS30 font-500">{{ item.m_data.name }}</div>
            <div class="flex-center lh-44 fontS24 color-6 mt-12">{{ item.m_data.size }}
            </div>
          </div>
        </div>
      </view>
    </view>
  </view>
</template>
<script>
import { getFilePath } from '../../utils/common'

export default {
  name: 'FileMessage',
  props: {
    item: {
      type: Object,
      default: () => ({
        avatar: '',
        flow: 'out',
        m_data: {
          name: '',
          size: 0,
          url: ''
        }
      }),
      required: true
    }
  },
  computed: {
    fileUrl() {
      if (this.item.m_data.url) {
        return getFilePath(this.item.m_data.url)
      }
      return undefined
    }
  },
  mounted() {
    console.log(this.item.m_data)
    this
  },
  methods: {
    toPage() {
      uni.downloadFile({
        url: this.item.m_data.url,
        success: (res) => {
          console.log(res)
          if (res.statusCode === 200) {
            uni.openDocument({
              filePath: res.tempFilePath,
              fileType: this.item.m_data.url.split('.')[this.item.m_data.url.split('.').length - 1], // 可以是doc, docx, xls, xlsx, ppt, pptx, pdf
              success: function (res) {

                uni.setClipboardData({
                  data: this.item.m_data.url,
                  success: () => {
                    uni.showToast({
                      title: '复制成功，请在浏览器打开保存',
                      icon: 'none'
                    });
                  },
                  fail: (err) => {
                    console.error('复制失败:', err);
                    uni.showToast({
                      title: '复制失败',
                      icon: 'none'
                    });
                  }
                });
                // 用户可以从预览界面选择"保存到手机"
              },
              fail: function (err) {
                console.error('打开失败', err);
                uni.showToast({ title: '打开文件失败', icon: 'none' });
              }
            });
          }
        },
        fail: (err) => {
          uni.hideLoading();
          console.error('下载失败', err);
          uni.showToast({
            title: '下载失败',
            icon: 'none'
          });
        }
      });
      // uni.navigateTo({
      //   url: `/pages/webView/webView?url=${this.item.m_data.url}`
      // })
    },
    handleDownload() {
      console.log(this.fileUrl)
      // const link = document.createElement('a')
      // link.style.display = 'none'
      // link.href = this.fileUrl
      // link.target = '_blank'
      // link.click()
    }
  }
}
</script>
<style lang="less" scoped>
.resumeItem {
  width: 500upx;
  background: #fff;
  padding: 10upx 20upx;
  border-radius: 8rpx;

  .resumeIcon {
    width: 85upx;
    height: 100upx;
  }
}
</style>
